<!--
 * @页面名称:
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="z-tree" :class="isDark">
    <tree
      :setting="setting"
      :nodes="nodes"
      @onClick="onClick"
      @onCheck="onCheck"
      @onCreated="handleCreated"
      @onCollapse="onExpand"
      @onExpand="onExpand"
      @onAsyncSuccess="onAsyncSuccess"
    />
  </div>
</template>

<script setup lang="ts">
import tree from "vue-giant-tree-3";
import { computed } from "vue";
import { useGlobalStore } from "@/stores/modules/global";

const globalStore = useGlobalStore();
const isDark = computed(() => (globalStore.isDark ? "dark" : ""));
const props = defineProps({
  nodes: {
    type: Array,
    default: () => {
      return [];
    }
  },
  setting: {
    type: Object,
    default: () => {
      const data = {
        check: {
          enable: false
        },
        data: {
          simpleData: {
            enable: true,
            pIdKey: "pid"
          }
        },
        view: {
          showIcon: false
        }
      };
      return data;
    }
  },
  defaultExpandAll: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(["onClick", "onCheck", "onExpand", "onCreated", "onAsyncSuccess"]);
// 点击事件
const onClick = (evt: Event, treeId: string | number, treeNode: any) => {
  emit("onClick", treeNode);
};
// 选中事件
const onCheck = (evt: Event, treeId: string | number, treeNode: any) => {
  emit("onCheck", treeNode);
};
// 折叠和展开事件
const onExpand = (evt: Event, treeId: string | number, treeNode: any) => {
  emit("onExpand", treeNode);
};
// 异步加载成功事件
const onAsyncSuccess = (evt: Event, treeId: string | number, treeNode: any) => {
  emit("onAsyncSuccess", treeNode);
};
// 初始化
const handleCreated = (ztreeObj: any) => {
  emit("onCreated", ztreeObj);
};
</script>

<style scoped lang="scss">
@import "./index.scss";
.z-tree {
  height: 100%;
  overflow: auto;
}
</style>
